<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery事件绑定</title>
    <script src="./js/jquery.min.js"></script>
    <script>

        $(function (){
            //获取焦点
            $("#username").focus(function (){
                //获取焦点让输入框的外边框去掉，同时设置边框红色
                $(this).css({border:"3px dotted red"})
                $(this).css({outline:"none"})
            });
            //失去焦点发生的事件
            $("#username").blur(function (){
                var val = $(this).val();

                $("span").text(val)
            })
        })

    </script>
</head>
<body>
<form action="">
    <input type="text" name="username" id="username"><span></span>
    <input type="submit" value="提交">
</form>
</body>
</html>